<template>
  <div>
    <div>
      <el-card>
        <!-- 搜索区域 -->
        <el-form
          :inline="true"
          :model="queryData"
          :rules="formRules"
          class="demo-form-inline"
        >
          <el-row>
            <el-col :span="21">
              <el-form-item prop="directoryName" label="目录名称">
                <el-input
                  v-model="queryData.directoryName"
                  placeholder="请输入目录名称"
                ></el-input> </el-form-item
              >&nbsp;&nbsp;&nbsp;
              <el-form-item prop="state" label="">
                <span style="font-weight: 1000">状态</span>&nbsp;
                <el-select v-model="state.value" placeholder="">
                  <el-option
                    v-for="item in state"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetBtn" icon="el-icon-search"
                  >清除</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  type="primary"
                  @click="initData"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-link type="primary" v-if="id" @click="$router.push('list')"
                  >返回学科</el-link
                >
              </el-form-item>

              <el-form-item>
                <el-button size="small" type="primary" @click="xinzengmulu()"
                  ><i class="el-icon-edit"></i>新增目录</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-alert
            show-icon
            :closable="false"
            :title="`数据一共${total}条`"
            type="info"
          >
          </el-alert> -->
            <el-alert :title="`数据一共${total}条`" type="info" show-icon>
            </el-alert>
          </el-row>
          <br />
        </el-form>
        <!-- 表格区域 -->
        <el-table border :data="directorysList">
          <el-table-column type="index" label="序号" width="80px" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              {{
                scope.row.addDate.substr(0, 10) +
                " " +
                scope.row.addDate.substr(11, 8)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试数量" />
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <!-- {{ scope.row.state * 1 === 1 ? "已启用" : "已禁用" }} -->
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="">
            <template slot-scope="scope">
              {{ userinfo(scope, scope.row) }}
            </template>
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" width="280">
            <template slot-scope="scope">
              <el-link @click="qiehuan(scope.row)">{{
                scope.row.state === 1 ? "禁用" : "启用"
              }}</el-link
              >&nbsp;&nbsp;
              <el-link
                :disabled="scope.row.state === 1"
                type="primary"
                @click="editDirectory(scope.row.id)"
                >修改</el-link
              >&nbsp;&nbsp;
              <el-link
                :disabled="scope.row.state === 1"
                type="success"
                @click="deldirectory(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.page"
            :page-size="queryData.pagesize"
            :page-sizes="[10, 20, 30, 40]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          />
        </el-row>
      </el-card>
      <!-- 新增/修改弹框组件 -->
      <template>
        <addDirectory
          :id="id"
          ref="addDirectory"
          @updateList="initData"
        ></addDirectory>
      </template>
    </div>
    <!-- 学科跳过来的目录页面 -->
  </div>
</template>

<script>
import {
  getdirectoryListApi,
  deldirectoryApi,
  getdirectorysimpleApi,
  getdirectoryInfoApi,
} from "@/api/directorys";
import { getSubjectSimpleApi } from "@/api/subjects";
import addDirectory from "./components/add-directorys.vue";
export default {
  name: "DirectorysPage",
  components: { addDirectory },
  data() {
    return {
      directorysList: [],
      //搜索区域表单
      queryData: {
        directoryName: "",
        page: 1,
        pagesize: 10,
        // state: "",
      },
      total: 0,
      formRules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
      },
      state: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "启用",
        },
      ],
      id: this.$route.query.id,
    };
  },
  methods: {
    async initData() {
      if (this.id) {
        let res = await getdirectoryListApi({
          directoryName: this.queryData.directoryName,
          page: this.queryData.page,
          pagesize: this.queryData.pagesize,
          subjectID: this.id,
          state: this.state.value,
        });
        this.directorysList = res.items;
        this.total = res.counts;
      } else {
        let res = await getdirectoryListApi({
          directoryName: this.queryData.directoryName,
          page: this.queryData.page,
          pagesize: this.queryData.pagesize,
          state: this.state.value,
        });
        this.directorysList = res.items;
        this.total = res.counts;
      }
      // let res = await getdirectoryListApi({
      //   directoryName: this.queryData.directoryName,
      //   page: this.queryData.page,
      //   pagesize: this.queryData.pagesize,
      //   state: this.state.value,
      // });
      // this.directorysList = res.items;
      // this.total = res.counts;
      // console.log(res, "99636434");
      // this.directorysList = res.items;
      // this.total = res.counts;
      // console.log(this.id, "89999999999999999999");
      // console.log(this.subjectID, "89999999999999999999");
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.initData();
    },
    //删除目录
    async deldirectory(id) {
      await this.$confirm("此操作将永久删除该学科, 是否继续?");
      await deldirectoryApi(id);
      this.$message.success("删除成功");
      if (this.queryData.page > 1 && this.directorysList.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    //修改目录
    async editDirectory(id) {
      this.$refs.addDirectory.showDialog = true;
      // this.$refs.addDirectory.formData.id = id;
      //获取要编辑的项的具体信息,回显表单
      let res = await getdirectoryInfoApi({
        id: id,
      });
      console.log(res, "11111111111111111");
      this.$refs.addDirectory.formData = res;
    },
    async qiehuan(val) {
      // console.log(state, id, "55555444444444");
      if (val.state === 1) {
        // await getdirectorysimpleApi({
        //   state: 0,
        //   id: id,
        // });
        // this.$message.success("切换为禁用状态");
        // this.initData();
        val.state = 0;
      } else {
        // await getdirectorysimpleApi({
        //   state: 1,
        //   id: id,
        // });
        // this.$message.success("切换为启用状态");
        // this.initData();
        val.state = 1;
      }
      await getdirectorysimpleApi({
        state: val.state,
        id: val.id,
      });
      this.$message.success("切换为启用状态");
      // this.initData();
    },
    userinfo(s, r) {
      // console.log(s, r, "7777777777");
    },
    //清除重置按钮
    resetBtn() {
      this.queryData.directoryName = "";
      this.initData();
      this.state = {};
    },
    xinzengmulu() {
      this.$refs.addDirectory.showDialog = true;
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style>
</style>
